<template>
  <div id="newsDetail">
    <el-row style="margin-top:20px;position:relative;">
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="16">
        <el-row style="margin-top:10px">
          <el-col :span="17">
            <div style="min-height:440px;background-color:white;padding: 20px;">
              <h2 style="font-weight: 400;margin-top:0; ">{{ article.articleTitle }}</h2>
              <div class="publish_user" style="float:left;">
                <el-avatar style="vertical-align: middle" :size="30">
                  <svg v-show="String(article.userName).length % 5 === 0" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                    <use xlink:href="#icon-touxiang1">{{'article.userName'.length}}</use>
                  </svg>
                  <svg v-show="String(article.userName).length % 5 === 1" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                    <use xlink:href="#icon-touxiang2"></use>
                  </svg>
                  <svg v-show="String(article.userName).length % 5 === 2" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                    <use xlink:href="#icon-touxiang"></use>
                  </svg>
                  <svg v-show="String(article.userName).length % 5 === 3" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                    <use xlink:href="#icon-touxiang3"></use>
                  </svg>
                  <svg v-show="String(article.userName).length % 5 === 4" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                    <use xlink:href="#icon-BARISTA"></use>
                  </svg>
                </el-avatar>
                <span class="publish_name" style="color:#10b4d2">{{ article.userName }}</span>
              </div>
              <span style="color:#999;float:right">{{ article.articleType }}</span>
              <p style="font-size:16px;font-weight: 400;color:#111;letter-spacing: .5px;
              white-space:pre-line;line-height: 30px;clear: both;padding-top:20px;">
                {{ article.articleContent }}
              </p>
            </div>
            <div  style="margin-top: 10px;background-color: white;padding: 20px;">
              <span style="font-size:18px;color: #606266;">评论区</span>
              <span><el-button style="float: right" type="primary" size="mini" @click="dialogFormVisible=true">发表评论</el-button></span>
              <el-divider direction="horizontal"></el-divider>
              <div v-show=show class="one" >
                <div class="article_item" v-for="comment in commentList" :key="comment.commentId" @click="detail(comment)">
                  <div class="item_top">
                    <div class="publish_user">
                      <el-avatar style="vertical-align: middle" :size="30">
                        <svg v-show="String(comment.userName).length % 5 === 0" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang1"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 1" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang2"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 2" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 3" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang3"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 4" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-BARISTA"></use>
                        </svg>
                      </el-avatar>
                      <span class="publish_name">{{ comment.userName }}</span>
                    </div>
                  </div>
                  <div class="content">
                    <div class="publish_content">
                      {{ comment.commentContent.split(":")[1] }}
                    </div>
                    <div class="publish_detail">
                      <span><i class="iconfont icon-comment">{{comment.childCommentList.length }}</i></span>
                      <span style="float:right">评论于 {{ comment.createTime }}</span>
                    </div>
                    <el-divider direction="horizontal"></el-divider>
                  </div>
                </div>
              </div>
              <div v-show=!show class="two">
                <el-page-header @back="goBack" style="margin-bottom: 20px;color:#8a8a8a">
                </el-page-header>
                <div class="article_item">
                  <div class="item_top">
                    <div class="publish_user">
                      <el-avatar style="vertical-align: middle" :size="30">
                        <svg v-show="String(comment.userName).length % 5 === 0" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang1"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 1" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang2"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 2" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 3" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-touxiang3"></use>
                        </svg>
                        <svg v-show="String(comment.userName).length % 5 === 4" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                          <use xlink:href="#icon-BARISTA"></use>
                        </svg>
                      </el-avatar>
                      <span class="publish_name">{{ comment.userName }}</span>
                    </div>
                    <el-button style="float: right;font-size: 30px" type="text" size="mini"
                               icon="el-icon-s-comment" @click="dialogFormVisible=true"></el-button>
                  </div>
                  <div class="content">
                    <div class="publish_content">
                      {{ comment.commentContent.split(":")[1] }}
                    </div>
                    <div class="publish_detail">
                      <span><i class="iconfont icon-good">19</i></span>
                      <span style="padding-left:15px;"><i class="iconfont icon-comment">
                      {{ comment.childCommentList.length }}
                        </i></span>
                      <span style="float:right">评论于 {{ comment.createTime }}</span>
                    </div>
                    <el-divider direction="horizontal"></el-divider>
                  </div>
                </div>
                <div style="margin-top:20px;background:#F2F6FC">
                  <div class="article_item" v-for="comment in childList" :key="comment.commentId">
                    <div class="item_top">
                      <div class="publish_user">
                        <el-avatar style="vertical-align: middle" :size="30">
                          <svg v-show="String(comment.userName).length % 5 === 0" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                            <use xlink:href="#icon-touxiang1"></use>
                          </svg>
                          <svg v-show="String(comment.userName).length % 5 === 1" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                            <use xlink:href="#icon-touxiang2"></use>
                          </svg>
                          <svg v-show="String(comment.userName).length % 5 === 2" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                            <use xlink:href="#icon-touxiang"></use>
                          </svg>
                          <svg v-show="String(comment.userName).length % 5 === 3" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                            <use xlink:href="#icon-touxiang3"></use>
                          </svg>
                          <svg v-show="String(comment.userName).length % 5 === 4" class="font-icon" style="width:30px;height:30px;" aria-hidden="true" >
                            <use xlink:href="#icon-BARISTA"></use>
                          </svg>
                        </el-avatar>
                        <span class="publish_name">{{ comment.userName }}</span>
                      </div>
                      <div class="publish_detail" style="display: inline-block;float: right">
                        <span style="float:right">评论于 {{ comment.createTime }}</span>
                      </div>
                    </div>
                    <div class="content">
                      <div class="publish_content2">
                        {{ comment.commentContent.split(":")[1] }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  align="center"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :hide-on-single-page="value"
                  style="padding-top: 15px"
              >
              </el-pagination>
            </div>

          </el-col>
          <el-col :span="7">
            <div class="hot_article">
              <div class="choice">
                <span style="font-size:18px;color: #606266;">文章热榜</span>
                <el-divider direction="horizontal"></el-divider>
                <div class="choice_title"><span class="choice_index" style="color:#d9000c;">1</span>
                  <span>2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index" style="color:#f55e3d;">2</span>
                  <span>2023届前端暑期总结</span></div>
                <div class="choice_title"><span class="choice_index" style="color:#ff9821;">3</span>
                  <span>2023届总结</span></div>
                <div class="choice_title"><span class="choice_index">7</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">5</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">6</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">7</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">8</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">9</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
                <div class="choice_title"><span class="choice_index">10</span>
                  <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
        </div>
      </el-col>
    </el-row>

    <el-dialog title="发表评论" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="form">
        <el-form-item>
          <el-input
              type="textarea"
              placeholder="请输入评论内容"
              v-model="form.commentContent"
              maxlength="30"
              :rows="5"
              show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">发表</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getArticle, getCommentList, publishComment} from "@/network/recruit";

export default {
  name: "Article",
  data() {
    return {
      value: true,
      currentPage: 1,
      total: 1,
      pageSize: 30,
      articleId: '',
      article: '',
      commentList: [],
      comment: {
        commentContent: '',
        childCommentList: []

      },
      childList: [],
      show: true,
      form:{
        userName:'',
        articleId:'',
        articleTitle:'',
        parentId:0,
        commentContent:''
      },
      dialogFormVisible:false
    }
  },
  mounted() {

    if (this.$route.params.articleId != undefined) {
      sessionStorage.setItem("articleId", this.$route.params.articleId);
    }
    this.articleId = sessionStorage.getItem("articleId");
    this.showArticle();
    this.CommentList();
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    showArticle() {
      getArticle(this.articleId).then(res => {
        this.article = res.data.data;
      })
    },
    CommentList() {
      getCommentList(this.articleId, this.currentPage, this.pageSize).then(res => {
        this.commentList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    detail(comment){
      this.comment = comment;
      this.childList = this.comment.childCommentList;
      this.show=false;
    },
    goBack(){
      this.show=true;
    },
    submit(){
     const userName = localStorage.getItem("common_userName");
      if(userName==undefined){
        this.$message.error("你还没登录，请先登录");
        this.$router.push("/login");
      }else{
        this.form.articleId = this.articleId;
        this.form.articleTitle = this.article.articleTitle;
        if(this.comment.commentId!=undefined){
          this.form.parentId = this.comment.commentId;
        }
        this.form.userName = userName;
        publishComment(this.form).then(res => {
          if(res!=undefined){
            this.$message.success("发表成功");
            this.form.commentContent='';
            this.form.parentId=0;
            this.CommentList();
            this.goBack();

          }
        })
      }
      this.dialogFormVisible = false;
    }
  }
}
</script>

<style scoped>


.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_article {
  width: 97.5%;
  height: 460px;
  background-color: white;
  margin-left: 10px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}

.choice_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: #414a60;
  margin: 15px 0;
}

.choice_index {
  display: inline-block;
  width: 20px;
  font-family: kanzhun-Regular, kanzhun;
  margin-right: 5px;
  color: #8b8e99;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  position: relative;
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  position: relative;
  top: 8px;
  color: #8a8a8a;
  float: right;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

.publish_content2 {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}
</style>